<script setup>
import { ref,reactive,onMounted } from 'vue';
import axios from 'axios'

import animeModel1 from '../../components/animeModel1.vue'
import animeModel2 from '../../components/animeModel2.vue'

const zsdfllVideoUrl = ref("")
const fan1Url = ref("")
const fan2Url = ref("")

axios('http://localhost:8088/anime/zsdfll').then(async res=>{
    // console.log(res.data[0].anime_msg[0].fan_player)
    zsdfllVideoUrl.value = await res.data[0].anime_msg[0].fan_player
    fan1Url.value = await res.data[0].anime_msg[0].fan_player
    fan2Url.value = await res.data[0].anime_msg[1].fan_player
}).catch(err=>console.log(err))
</script>

<template>
    <div class="zsdfllVideoAll">
        <div class="dialogBoxColor"></div>
        <div class="zsdfllVideoMasterBox">
            <animeModel1 
            fan_fm=""
            :videoUrl="zsdfllVideoUrl"
            :fan1Url="fan1Url"
            :fan2Url="fan2Url"

            fanName="zsdfll"
            />
        </div>
        <div class="animeMsg">
            <animeModel2 />
        </div>
    </div>
</template>

<style scoped>
.zsdfllVideoAll{
    position: absolute;
    left: 0;
    top: 0;
    width: 1855px;
    height: 100%;
    /* background-color: red; */
    /* overflow: hidden; */
}
.dialogBoxColor{
    width: 100%;
    height: 6%;
    background: linear-gradient(to left,rgb(105,68,128),rgb(232,132,80));
    z-index: -1;
}
.zsdfllVideoMasterBox{
    width: 100%;
    height: 94%;
    /* background-color: red; */
}
</style>